<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书分销系统首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">

    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 50px;

        }
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 36px;
        }
        body > .el-container {
            margin-bottom: 40px;
        }
      /*  html,body,#app{
            height: 100%;
        }*/
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row style="background-color: #001529">
                    <el-col :span="6"><div class="grid-content bg-purple" style="color: #2fb9d4">图书分销后台管理系统({{empInfo.storesName}})</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple" style="color: #2fb9d4">{{currentDateTime}}&nbsp;{{week}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">
                        <el-menu
                                :default-active="activeIndex2"
                                class="el-menu-demo"
                                mode="horizontal"
                                background-color="#001529"
                                text-color="#fff"
                                active-text-color="#ffd04b">

                            <el-submenu index="2">
                                <template slot="title">
                                    <el-image
                                        style="width: 30px;height:30px;border-radius:50%;" :src="empInfo.empImg">
                                    </el-image>
                                    {{empInfo.username}}-{{empInfo.empName}}
                                </template>
                                <el-menu-item index="2-2" @click="logout">切换账号/退出</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="4"><a href="https://www.baidu.com" target="_blank">百度首页</a></el-menu-item>
                        </el-menu>
                    </div></el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                     <!--左侧树形菜单-->
                    <el-tree :data="data"
                             :props="defaultProps"
                             default-expand-all
                             @node-click="handleNodeClick">
                    </el-tree>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                            <el-tab-pane
                                    v-for="(item, index) in editableTabs"
                                    :key="item.name"
                                    :label="item.title"
                                    :name="item.name"
                            >
                            <iframe :src="item.url" width="100%" height="600px;" frameborder="0"></iframe>
                            </el-tab-pane>
                        </el-tabs>
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>
<!--引入vue-->
<script src="/js/vue.js"></script>
<!-- 引入组件element-ui库 -->
<script src="/js/index.js"></script>
<!--引入axios库-->
<script src="/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:function () {
            return{
                //和页签页有关属性开始
                editableTabsValue: '1',
                dialogFormVisible:false,
                editableTabs: [{
                    title: '默认页',
                    name: '1',
                   // content: 'Tab 1111111111111 content'
                    url:'http://localhost:8080/html/statitics/operation-log.html'
                } ],
                tabIndex: 1,
                //和页签页有关属性结束
                //el-tree 的数据
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //头部导航相关属性
                currentDateTime:'',//获取当前时间
                week:'',//星期几
                activeIndex2:'1', //导航栏默认激活
                empInfo:{} //登录人信息对象
            }
        },
        created:function () { //初始化方法 类似于jquery  $({})
            //让_this等于当前vue对象
            var _this = this;
            // alert(111);
            //赋值 axios官网代码
            axios.get('/menu/listTreeNodeByEmpId')  //指定请求的url及参数  get
                .then(function (response) {  //正确返回对象的处理
                    //JSON.stringify   把json转换为json字符串，方便查看
                    console.log(JSON.stringify(response));
                    //直接使用this 会指 axios对象  错误
                    // this.tableData
                    //判断返回值是否正确
                    if(response.data.code==200){
                        _this.data = response.data.data;
                    }
                })
            //获取用户登录后的信息
            axios.get('/emp/getLoginSession')
                .then(function (response) {
                    if(response.data.code==200){
                        _this.empInfo=response.data.data;
                    }
                });
            // 调用两个方法，给头部导航栏gettime和week赋值
            this.currentTime();
            this.getWeek();
        },
        methods: { //定义所有元素绑定的方法
            //绑定点击事件
            handleNodeClick(data) {
                console.log(data);
                console.log(JSON.stringify(data));
                if(data.url!=null&&data.url!=''&&data.url!='null'&&data.url!='undefined'){
                    //当点击左侧菜单时，添加页签
                    this.addTab(data.label,data.url);
                }

            },
            //添加页签
            addTab(targetName,url) {
                let newTabName = ++this.tabIndex + '';//让tabIndex加1

                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签变量
                var  isHaveTab = false;
               //循环所有页签页
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(targetName === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName =tab.name;
                    }
                });

                //isHaveTab  集合中没有的时候，添加
               if(!isHaveTab) {
                   this.editableTabs.push({//向数组中添加数据
                       title: targetName,
                       name: newTabName,
                       url: url
                   });
               }
                //让它高亮
                this.editableTabsValue = newTabName;
            },
            //删除页签
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            //头部导航获取当前时间
            getTime:function(){
                //获取当前时间
                let currentDate  =new Date();
                //获取到4位的年 2022
                let yy = currentDate.getFullYear();
                let mm = currentDate.getMonth()+1 < 10 ? '0'+(currentDate.getMonth()+1) : currentDate.getMonth()+1;
                let dd = currentDate.getDate() < 10 ? '0'+currentDate.getDate() : currentDate.getDate();
                let hh = currentDate.getHours() < 10 ? currentDate.getHours() : currentDate.getHours();
                //currentDate.getMinutes()<10    0-9   ->  00 - 09
                let mf = currentDate.getMinutes()<10 ? '0'+currentDate.getMinutes() : currentDate.getMinutes();
                let ss = currentDate.getSeconds()<10 ? '0'+currentDate.getSeconds() : currentDate.getSeconds();
                this.currentDateTime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            },
            //每隔0.5秒调用getTime属性
            currentTime(){
                //setInterval(param1,param2)  每个param2间隔时间调回用方法param1
                setInterval(this.getTime,500)
            },
            //获取星期几
            getWeek(){
                //java String   "abc".charAt(1)  返回某一个字符串"abc"1位置上的字符
                //.getDay() 获取星期几的数字 0-6    周日是第1天
                //.getDate() 获取档期日期的每月第几天   2020-03-12  12
                console.log("星期"+new Date().getDay());
                //charAt 返回指定字符串位置上的值  "abcdef".charAt(0) = a     "abcdef".charAt(2) = c
                this.week='星期'+"日一二三四五六".charAt(new Date().getDay());
            },
            //用户退出方法
            logout(){
                // logout 不用自己写方法  调用shiro退出配置  调用配置时 它会调用LogoutFilter 做销毁session操作
                axios.get('/logout')  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        location.href="/html/login.html";
                    })
            }
        }
    })
</script>
</html>